<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					class="small-size-table"
					:data="tableData"
					:header-cell-style="getRowClass"
					style="width: 100%"
				>
					<el-table-column
						:label="$t('merchant.level_id')"
						align="center"
						prop="id"
					></el-table-column>
					<el-table-column
						:label="$t('merchant.merchant_level')"
						align="center"
						prop="level"
					></el-table-column>
					<el-table-column
						:label="$t('merchant.last_operate')"
						align="center"
						prop="updatedBy"
					></el-table-column>
					<BaseColumn
						:label="$t('merchant.last_operate_time')"
						prop="updatedAt"
						formatDate="YYYY-MM-DD HH:mm:ss"
					/>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('803011')"
								type="text"
								:disabled="loading"
								size="medium"
								@click="edit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					v-if="total"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="$store.getters.pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				/>
			</div>
			<!--层级编辑弹窗-->
			<el-dialog
				:destroy-on-close="true"
				:title="$t('merchant.level_name_modify')"
				:visible.sync="dialogFormVisible"
				class="rempadding"
				width="520px"
				@close="clear"
			>
				<el-divider></el-divider>
				<el-form
					ref="formSub"
					:model="dialogForm"
					label-width="auto"
					:rules="rules"
				>
					<el-form-item :label="`${$t('merchant.level_id')}:`">
						<el-input
							v-model.trim="dialogForm.id"
							:placeholder="$t('common.please_enter')"
							autocomplete="off"
							clearable
							disabled
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('merchant.merchant_level')}:`"
						prop="level"
					>
						<el-input
							v-model.trim="dialogForm.level"
							:maxlength="20"
							:placeholder="$t('common.please_enter')"
							autocomplete="off"
							clearable
							show-word-limit
						></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						:disabled="butLoading"
						:loading="butLoading"
						type="primary"
						@click="subAddOrEdit"
					>
						{{ $t('common.submit') }}
					</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import {
	queryMerchantLevelListApi,
	updateMerchantLevelApi
} from '@/api/merchant/merchant-config/level-config'
import BaseColumn from '@/components/TableColumns/BaseColumn'

export default {
	name: routerNames.levelConfig,
	components: {
		BaseColumn
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {
				id: undefined,
				level: undefined
			},
			butLoading: false
		}
	},
	computed: {
		rules() {
			return {
				level: [
					{
						required: true,
						message: this.$t('merchant.check_length_2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 20,
						message: this.$t('merchant.check_length_2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		loadData() {
			this.loading = true
			queryMerchantLevelListApi()
				.then((res) => {
					this.loading = false
					if (res?.code === 200 && res.data) {
						const { pageNum, pageSize, record = [], totalRecord } =
							res.data || {}
						this.tableData = record || []
						this.pageNum = pageNum
						this.ppageSize = pageSize
						this.list = record
						this.total = totalRecord || 0
					} else {
						this.$message({
							message:
								res?.msg || this.$t('common.interface_error'),
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		edit(val) {
			this.dialogForm = {
				id: val.id,
				level: val.level
			}
			this.dialogFormVisible = true
			this.$refs.formSub && this.$refs.formSub.clearValidate()
		},
		subAddOrEdit() {
			const params = {
				...this.dialogForm
			}
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.butLoading = true
					updateMerchantLevelApi(params)
						.then((res) => {
							if (res.code === 200) {
								this.$message.success(
									this.$t('common.modify_success')
								)
								this.clear()
								this.dialogFormVisible = false
								this.butLoading = false
								this.loadData()
							}
						})
						.catch(() => {
							this.butLoading = false
						})
				}
			})
		},
		clear() {
			this.dialogForm = {
				id: undefined,
				creditLevel: undefined,
				creditLevelName: undefined
			}
			this.$refs.formSub.clearValidate()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .rempadding {
	.el-dialog__header {
		padding: 20px 20px 0;
	}

	.el-dialog__body {
		padding: 0;

		.contentBox,
		form {
			padding: 0 20px;
		}
	}

	.dialog-footer {
		text-align: center;
	}
}
</style>
